﻿<%@ Page Title="" Language="C#" MasterPageFile="~/Areas/Admin/Views/Shared/Extjs.Master" Inherits="System.Web.Mvc.ViewPage<dynamic>" %>

<asp:Content ID="Content1" ContentPlaceHolderID="TitleContent" runat="server">
    DemoPage
</asp:Content>

<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">

    <div id="west" class="x-hide-display">
        <p>Hi. I'm the west panel.</p>
    </div>
    <div id="center2" class="x-hide-display">
        <a id="hideit" href="#">Toggle the west region</a>
        <p>My closable attribute is set to false so you can't close me. The other center panels can be closed.</p>
        <p>The center panel automatically grows to fit the remaining space in the container that isn't taken up by the border regions.</p>
        <hr>
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed metus nibh, sodales a, porta at, vulputate eget, dui. Pellentesque ut nisl. Maecenas tortor turpis, interdum non, sodales non, iaculis ac, lacus. Vestibulum auctor, tortor quis iaculis malesuada, libero lectus bibendum purus, sit amet tincidunt quam turpis vel lacus. In pellentesque nisl non sem. Suspendisse nunc sem, pretium eget, cursus a, fringilla vel, urna. Aliquam commodo ullamcorper erat. Nullam vel justo in neque porttitor laoreet. Aenean lacus dui, consequat eu, adipiscing eget, nonummy non, nisi. Morbi nunc est, dignissim non, ornare sed, luctus eu, massa. Vivamus eget quam. Vivamus tincidunt diam nec urna. Curabitur velit. Quisque dolor magna, ornare sed, elementum porta, luctus in, leo.</p>
        <p>Donec quis dui. Sed imperdiet. Nunc consequat, est eu sollicitudin gravida, mauris ligula lacinia mauris, eu porta dui nisl in velit. Nam congue, odio id auctor nonummy, augue lectus euismod nunc, in tristique turpis dolor sed urna. Donec sit amet quam eget diam fermentum pharetra. Integer tincidunt arcu ut purus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla blandit malesuada odio. Nam augue. Aenean molestie sapien in mi. Suspendisse tincidunt. Pellentesque tempus dui vitae sapien. Donec aliquam ipsum sit amet pede. Sed scelerisque mi a erat. Curabitur rutrum ullamcorper risus. Maecenas et lorem ut felis dictum viverra. Fusce sem. Donec pharetra nibh sit amet sapien.</p>
        <p>Aenean ut orci sed ligula consectetuer pretium. Aliquam odio. Nam pellentesque enim. Nam tincidunt condimentum nisi. Maecenas convallis luctus ligula. Donec accumsan ornare risus. Vestibulum id magna a nunc posuere laoreet. Integer iaculis leo vitae nibh. Nam vulputate, mauris vitae luctus pharetra, pede neque bibendum tellus, facilisis commodo diam nisi eget lacus. Duis consectetuer pulvinar nisi. Cras interdum ultricies sem. Nullam tristique. Suspendisse elementum purus eu nisl. Nulla facilisi. Phasellus ultricies ullamcorper lorem. Sed euismod ante vitae lacus. Nam nunc leo, congue vehicula, luctus ac, tempus non, ante. Morbi suscipit purus a nulla. Sed eu diam.</p>
        <p>Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Cras imperdiet felis id velit. Ut non quam at sem dictum ullamcorper. Vestibulum pharetra purus sed pede. Aliquam ultrices, nunc in varius mattis, felis justo pretium magna, eget laoreet justo eros id eros. Aliquam elementum diam fringilla nulla. Praesent laoreet sapien vel metus. Cras tempus, sapien condimentum dictum dapibus, lorem augue fringilla orci, ut tincidunt eros nisi eget turpis. Nullam nunc nunc, eleifend et, dictum et, pharetra a, neque. Ut feugiat. Aliquam erat volutpat. Donec pretium odio nec felis. Phasellus sagittis lacus eget sapien. Donec est. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;</p>
        <p>Vestibulum semper. Nullam non odio. Aliquam quam. Mauris eu lectus non nunc auctor ullamcorper. Sed tincidunt molestie enim. Phasellus lobortis justo sit amet quam. Duis nulla erat, varius a, cursus in, tempor sollicitudin, mauris. Aliquam mi velit, consectetuer mattis, consequat tristique, pulvinar ac, nisl. Aliquam mattis vehicula elit. Proin quis leo sed tellus scelerisque molestie. Quisque luctus. Integer mattis. Donec id augue sed leo aliquam egestas. Quisque in sem. Donec dictum enim in dolor. Praesent non erat. Nulla ultrices vestibulum quam.</p>
        <p>Duis hendrerit, est vel lobortis sagittis, tortor erat scelerisque tortor, sed pellentesque sem enim id metus. Maecenas at pede. Nulla velit libero, dictum at, mattis quis, sagittis vel, ante. Phasellus faucibus rutrum dui. Cras mauris elit, bibendum at, feugiat non, porta id, neque. Nulla et felis nec odio mollis vehicula. Donec elementum tincidunt mauris. Duis vel dui. Fusce iaculis enim ac nulla. In risus.</p>
        <p>Donec gravida. Donec et enim. Morbi sollicitudin, lacus a facilisis pulvinar, odio turpis dapibus elit, in tincidunt turpis felis nec libero. Nam vestibulum tempus ipsum. In hac habitasse platea dictumst. Nulla facilisi. Donec semper ligula. Donec commodo tortor in quam. Etiam massa. Ut tempus ligula eget tellus. Curabitur id velit ut velit varius commodo. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nulla facilisi. Fusce ornare pellentesque libero. Nunc rhoncus. Suspendisse potenti. Ut consequat, leo eu accumsan vehicula, justo sem lobortis elit, ac sollicitudin ipsum neque nec ante.</p>
        <p>Aliquam elementum mauris id sem. Vivamus varius, est ut nonummy consectetuer, nulla quam bibendum velit, ac gravida nisi felis sit amet urna. Aliquam nec risus. Maecenas lacinia purus ut velit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Suspendisse sit amet dui vitae lacus fermentum sodales. Donec varius dapibus nisl. Praesent at velit id risus convallis bibendum. Aliquam felis nibh, rutrum nec, blandit non, mattis sit amet, magna. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Etiam varius dignissim nibh. Quisque id orci ac ante hendrerit molestie. Aliquam malesuada enim non neque.</p>
    </div>
    <div id="center1" class="x-hide-display">
        <p><b>Done reading me? Close me by clicking the X in the top right corner.</b></p>
        <p>Vestibulum semper. Nullam non odio. Aliquam quam. Mauris eu lectus non nunc auctor ullamcorper. Sed tincidunt molestie enim. Phasellus lobortis justo sit amet quam. Duis nulla erat, varius a, cursus in, tempor sollicitudin, mauris. Aliquam mi velit, consectetuer mattis, consequat tristique, pulvinar ac, nisl. Aliquam mattis vehicula elit. Proin quis leo sed tellus scelerisque molestie. Quisque luctus. Integer mattis. Donec id augue sed leo aliquam egestas. Quisque in sem. Donec dictum enim in dolor. Praesent non erat. Nulla ultrices vestibulum quam.</p>
        <p>Duis hendrerit, est vel lobortis sagittis, tortor erat scelerisque tortor, sed pellentesque sem enim id metus. Maecenas at pede. Nulla velit libero, dictum at, mattis quis, sagittis vel, ante. Phasellus faucibus rutrum dui. Cras mauris elit, bibendum at, feugiat non, porta id, neque. Nulla et felis nec odio mollis vehicula. Donec elementum tincidunt mauris. Duis vel dui. Fusce iaculis enim ac nulla. In risus.</p>
        <p>Donec gravida. Donec et enim. Morbi sollicitudin, lacus a facilisis pulvinar, odio turpis dapibus elit, in tincidunt turpis felis nec libero. Nam vestibulum tempus ipsum. In hac habitasse platea dictumst. Nulla facilisi. Donec semper ligula. Donec commodo tortor in quam. Etiam massa. Ut tempus ligula eget tellus. Curabitur id velit ut velit varius commodo. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nulla facilisi. Fusce ornare pellentesque libero. Nunc rhoncus. Suspendisse potenti. Ut consequat, leo eu accumsan vehicula, justo sem lobortis elit, ac sollicitudin ipsum neque nec ante.</p>
        <p>Aliquam elementum mauris id sem. Vivamus varius, est ut nonummy consectetuer, nulla quam bibendum velit, ac gravida nisi felis sit amet urna. Aliquam nec risus. Maecenas lacinia purus ut velit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Suspendisse sit amet dui vitae lacus fermentum sodales. Donec varius dapibus nisl. Praesent at velit id risus convallis bibendum. Aliquam felis nibh, rutrum nec, blandit non, mattis sit amet, magna. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Etiam varius dignissim nibh. Quisque id orci ac ante hendrerit molestie. Aliquam malesuada enim non neque.</p>
    </div>
    <div id="props-panel" class="x-hide-display" style="width:200px;height:200px;overflow:hidden;">
    </div>
    <div id="south" class="x-hide-display">
        <p>south - generally for informational stuff, also could be for status bar</p>
    </div>

    <script type="text/javascript">
        Ext.require(['*']);

        var registerWindow;

        function showRegisterForm() {
            if (!registerWindow) {
                var fieldName = new Ext.form.field.Text({
                            xtype: 'textfield',
                            allowBlank: false,
                            blankText:'用户名不能为空',
                            emptyText:'请输入用户名'
                        })
                        var registerForm = Ext.widget('form', {
                            layout: {
                                type: 'vbox',
                                align: 'stretch'
                            },
                            border: false,
                            bodyPadding: 10,

                            fieldDefaults: {
                                labelAlign: 'top',
                                labelWidth: 100,
                                labelStyle: 'font-weight:bold'
                            },
                            defaults: {
                                margins: '0 0 10 0'
                            },

                            items: [
                    { xtype: 'fieldcontainer',
                        fieldLabel: '请填写邮箱地址',
                        combineErrors: false,
                        defaults: {
                            hideLabel: true
                        },
                        items: [fieldName, { xtype: 'displayfield',
                            value: '@abc.com'
                        }]
                    }],

                            buttons: [{
                                text: '取消',
                                handler: function () {
                                    registerForm.getForm().reset();
                                    registerWindow.close();
                                }
                            }, {
                                text: '提交',
                                handler: function () {
                                    if (registerForm.getForm().isValid()) {
                                        // In a real application, this would submit the form to the configured url
                                        registerForm.getForm().submit({
                                            url: '/Home/AddUser',
                                            params: { UserName: fieldName.getValue() },
                                            waitMsg: '提交中...',
                                            success: function (form, action) {
                                                Ext.Msg.alert('提示', '提交成功', function () { registerForm.getForm().reset(); });
                                            },
                                            failure: function (form, action) {
                                                Ext.Msg.alert('提示', '提交失败', function () { registerForm.getForm().reset(); });
                                            }
                                        });
                                        //registerForm.getForm().reset();
                                        registerWindow.close();
                                        //Ext.MessageBox.alert('Thank you!', 'Your inquiry has been sent. We will respond as soon as possible.');
                                    }
                                }
                            }]
                        });

            registerWindow = Ext.widget('window', {
                title: '用户注册',
                closeAction: 'hide',
                width: 400,
                height: 200,
                minHeight: 200,
                layout: 'fit',
                resizable: true,
                modal: true,
                items: registerForm
            });
            }
        registerWindow.show();
    }

    var loginWindow;

        function showLoginForm() {
            if (!loginWindow) {
                var fieldName = new Ext.form.field.Text({
                    xtype: 'textfield',
                    allowBlank: false,
                    fieldLabel: '用户名',
                    blankText: '用户名不能为空',
                    emptyText: '请输入用户名'
                })
                var fieldPass = new Ext.form.field.Text({
                    xtype: 'textfield',
                    inputType: 'password',
                    allowBlank: false,
                    fieldLabel: '密码',
                    blankText: '密码不能为空',
                    emptyText: '请输入密码'
                })
                var loginForm = Ext.widget('form', {
                    layout: {
                        type: 'vbox',
                        align: 'stretch'
                    },
                    border: false,
                    bodyPadding: 10,

                    fieldDefaults: {
                        labelAlign: 'top',
                        labelWidth: 100,
                        labelStyle: 'font-weight:bold'
                    },
                    defaults: {
                        margins: '0 0 10 0'
                    },

                    items: [
                    { xtype: 'fieldcontainer',
                        fieldLabel: '请填写用户名和密码',
                        combineErrors: false,                        
                        items: [fieldName, { xtype: 'displayfield',
                            value: '@abc.com'
                        },fieldPass]
                    }],

                    buttons: [{
                        text: '取消',
                        handler: function () {
                            loginForm.getForm().reset();
                            loginWindow.close();
                        }
                    }, {
                        text: '登录',
                        handler: function () {
                            if (loginForm.getForm().isValid()) {
                                // In a real application, this would submit the form to the configured url
                                loginForm.getForm().submit({
                                    url: '/User/Login',
                                    params: { UserName: fieldName.getValue(),UserPass:fieldPass.getValue() },
                                    waitMsg: '提交中...',
                                    success: function (form, action) {
                                        Ext.Msg.alert('提示', '提交成功', function () { loginForm.getForm().reset(); });
                                    },
                                    failure: function (form, action) {
                                        Ext.Msg.alert('提示', '提交失败', function () { loginForm.getForm().reset(); });
                                    }
                                });
                                //registerForm.getForm().reset();
                                loginWindow.close();
                                //Ext.MessageBox.alert('Thank you!', 'Your inquiry has been sent. We will respond as soon as possible.');
                            }
                        }
                    }]
                });

                loginWindow = Ext.widget('window', {
                    title: '用户登录',
                    closeAction: 'hide',
                    width: 400,
                    height: 250,
                    minHeight: 250,
                    layout: 'fit',
                    resizable: true,
                    modal: true,
                    items: loginForm
                });
            }
            loginWindow.show();
        }

        var passmodifyWindow;

        function showPassModifyForm() {
            if (!passmodifyWindow) {                
                var fieldOldPass = new Ext.form.field.Text({
                    xtype: 'textfield',
                    inputType: 'password',
                    allowBlank: false,
                    fieldLabel: '原密码',
                    blankText: '密码不能为空',
                    emptyText: '请输入密码'
                });
                var fieldNewPass1 = new Ext.form.field.Text({
                    xtype: 'textfield',
                    name: 'password1',
                    inputType: 'password',
                    allowBlank: false,
                    fieldLabel: '请输入密码',
                    blankText: '密码不能为空',
                    emptyText: '请输入密码'
                });
                var fieldNewPass2 = new Ext.form.field.Text({
                    xtype: 'textfield',
                    inputType: 'password',
                    allowBlank: false,
                    fieldLabel: '确认密码',
                    blankText: '密码不能为空',
                    emptyText: '请输入密码',
                    validator: function (value) {
                        var password1 = this.previousSibling('[name=password1]');
                        return (value === password1.getValue()) ? true : '密码不一致'
                    }
                });
                var passmodifyForm = Ext.widget('form', {
                    layout: {
                        type: 'vbox',
                        align: 'stretch'
                    },
                    border: false,
                    bodyPadding: 10,

                    fieldDefaults: {
                        labelAlign: 'top',
                        labelWidth: 100,
                        labelStyle: 'font-weight:bold'
                    },
                    defaults: {
                        margins: '0 0 10 0'
                    },

                    items: [
                    { xtype: 'fieldcontainer',
                        fieldLabel: '请填写原密码，并输入新密码',
                        combineErrors: false,
                        items: [fieldOldPass, fieldNewPass1, fieldNewPass2]
                    }],

                    buttons: [{
                        text: '取消',
                        handler: function () {
                            passmodifyForm.getForm().reset();
                            passmodifyWindow.close();
                        }
                    }, {
                        text: '提交',
                        handler: function () {
                            if (passmodifyForm.getForm().isValid()) {
                                // In a real application, this would submit the form to the configured url
                                passmodifyForm.getForm().submit({
                                    url: '/User/ModifyUserPass',
                                    params: { OldPass: fieldOldPass.getValue(), NewPass: fieldNewPass1.getValue() },
                                    waitMsg: '提交中...',
                                    success: function (form, action) {
                                        Ext.Msg.alert('提示', '提交成功', function () { passmodifyForm.getForm().reset(); });
                                    },
                                    failure: function (form, action) {
                                        Ext.Msg.alert('提示', '提交失败', function () { passmodifyForm.getForm().reset(); });
                                    }
                                });
                                //registerForm.getForm().reset();
                                passmodifyWindow.close();
                                //Ext.MessageBox.alert('Thank you!', 'Your inquiry has been sent. We will respond as soon as possible.');
                            }
                        }
                    }]
                });

                passmodifyWindow = Ext.widget('window', {
                    title: '修改密码',
                    closeAction: 'hide',
                    width: 400,
                    height: 250,
                    minHeight: 250,
                    layout: 'fit',
                    resizable: true,
                    modal: true,
                    items: passmodifyForm
                });
            }
            passmodifyWindow.show();
        }

        Ext.onReady(function () {

            Ext.QuickTips.init();

            Ext.state.Manager.setProvider(Ext.create('Ext.state.CookieProvider'));


            var myData = [
         ['3m Co', 71.72, 0.02, 0.03, '9/1 12:00am'],
         ['Alcoa Inc', 29.01, 0.42, 1.47, '9/1 12:00am'],
         ['Altria Group Inc', 83.81, 0.28, 0.34, '9/1 12:00am'],
         ['American Express Company', 52.55, 0.01, 0.02, '9/1 12:00am'],
         ['American International Group, Inc.', 64.13, 0.31, 0.49, '9/1 12:00am'],
         ['AT&T Inc.', 31.61, -0.48, -1.54, '9/1 12:00am'],
         ['Boeing Co.', 75.43, 0.53, 0.71, '9/1 12:00am'],
         ['Caterpillar Inc.', 67.27, 0.92, 1.39, '9/1 12:00am'],
         ['Citigroup, Inc.', 49.37, 0.02, 0.04, '9/1 12:00am'],
         ['E.I. du Pont de Nemours and Company', 40.48, 0.51, 1.28, '9/1 12:00am']
     ];

            var store = Ext.create('Ext.data.ArrayStore', {
                fields: [
           { name: 'company' },
           { name: 'price', type: 'float' },
           { name: 'change', type: 'float' },
           { name: 'pctChange', type: 'float' },
           { name: 'lastChange', type: 'date', dateFormat: 'n/j h:ia' }
        ],
                sorters: {
                    property: 'company',
                    direction: 'ASC'
                },
                data: myData,
                pageSize: 8
            });

            var pagingBar = Ext.createWidget('pagingtoolbar', {
                store: store,
                displayInfo: false,
                displayMsg: 'Displaying topics {0} - {1} of {2}'
            });

            var gridPanel = new Ext.Panel({
                xtype: 'gridpanel',
                height: 601,

                store: store,

                columns: [
            { header: "Company", flex: 1, sortable: true, dataIndex: 'company' },
            { header: "Price", width: 75, sortable: true, dataIndex: 'price' },
            { header: "Change", width: 75, sortable: true, dataIndex: 'change' },
            { header: "% Change", width: 75, sortable: true, dataIndex: 'pctChange' },
            { header: "Last Updated", width: 85, sortable: true, renderer: Ext.util.Format.dateRenderer('m/d/Y'), dataIndex: 'lastChange' }
        ],
                loadMask: true,

                viewConfig: {
                    stripeRows: true
                },

                bbar: pagingBar,
                tbar: [
            { text: '注册用户',
                handler: showRegisterForm
            }, { text: '用户登录', handler: showLoginForm }, { text: '修改密码', handler: showPassModifyForm },
            '->',
            {
                xtype: 'triggerfield',
                trigger1Cls: Ext.baseCSSPrefix + 'form-clear-trigger',
                trigger2Cls: Ext.baseCSSPrefix + 'form-search-trigger'
            }
        ]
            });

            var tree = Ext.create('Ext.tree.Panel', {
                title: '管理功能',
                rootVisible: false,
                root: {
                    text: 'Root Node',
                    expanded: true,
                    children: [{
                        text: '用户管理',
                        expanded: true,
                        children: [{
                            text: '增加用户',
                            leaf: true
                        }, {
                            text: '用户管理',
                            leaf: true
                        }]
                    }, {
                        text: '活动管理',
                        children: [{
                            text: '新增活动',
                            leaf: true
                        }, {
                            text: '活动管理',
                            leaf: true
                        }, {
                            text: '活动统计',
                            leaf: true
                        }]
                    }]
                }
            });

            var accordionPanel = {
                id: 'accordion-panel',
                title: '功能导航',
                region: 'north',
                layout: 'accordion',
                split: true,
                height: 360,
                minSize: 150,
                autoScroll: true,
                items: [{
                    title: '活动',
                    html: 'Some content'
                }, tree]
            };

            // This is the Details panel that contains the description for each example layout.
            var detailsPanel = {
                id: 'details-panel',
                title: '活动描述',
                region: 'center',
                bodyStyle: 'padding-bottom:15px;',
                autoScroll: true,
                html: '<p class="details-info">When you select a layout from the tree, additional details will display here.</p>'
            };


            var checkGroup = {
                xtype: 'fieldset',
                title: '多选题目',
                layout: 'anchor',
                defaults: {
                    anchor: '100%',
                    labelStyle: 'padding-left:4px;'
                },
                collapsible: true,
                collapsed: true,
                items: [{
                    xtype: 'textfield',
                    name: 'txt-test3',
                    fieldLabel: 'Alignment Test'
                }, {
                    // Use the default, automatic layout to distribute the controls evenly
                    // across a single row
                    xtype: 'checkboxgroup',
                    fieldLabel: 'Auto Layout',
                    cls: 'x-check-group-alt',
                    items: [
                { boxLabel: 'Item 1', name: 'cb-auto-1' },
                { boxLabel: 'Item 2', name: 'cb-auto-2', checked: true },
                { boxLabel: 'Item 3', name: 'cb-auto-3' },
                { boxLabel: 'Item 4', name: 'cb-auto-4' },
                { boxLabel: 'Item 5', name: 'cb-auto-5' }
            ]
                }, {
                    xtype: 'checkboxgroup',
                    fieldLabel: 'Single Column',
                    // Put all controls in a single column with width 100%
                    columns: 1,
                    items: [
                { boxLabel: 'Item 1', name: 'cb-col-1' },
                { boxLabel: 'Item 2', name: 'cb-col-2', checked: true },
                { boxLabel: 'Item 3', name: 'cb-col-3' }
            ]
                }, {
                    xtype: 'checkboxgroup',
                    fieldLabel: 'Multi-Column (horizontal)',
                    cls: 'x-check-group-alt',
                    // Distribute controls across 3 even columns, filling each row
                    // from left to right before starting the next row
                    columns: 3,
                    items: [
                { boxLabel: 'Item 1', name: 'cb-horiz-1' },
                { boxLabel: 'Item 2', name: 'cb-horiz-2', checked: true },
                { boxLabel: 'Item 3', name: 'cb-horiz-3' },
                { boxLabel: 'Item 4', name: 'cb-horiz-4' },
                { boxLabel: 'Item 5', name: 'cb-horiz-5' }
            ]
                }, {
                    xtype: 'checkboxgroup',
                    fieldLabel: 'Multi-Column (vertical)',
                    // Distribute controls across 3 even columns, filling each column
                    // from top to bottom before starting the next column
                    columns: 3,
                    vertical: true,
                    items: [
                { boxLabel: 'Item 1', name: 'cb-vert-1' },
                { boxLabel: 'Item 2', name: 'cb-vert-2', checked: true },
                { boxLabel: 'Item 3', name: 'cb-vert-3' },
                { boxLabel: 'Item 4', name: 'cb-vert-4' },
                { boxLabel: 'Item 5', name: 'cb-vert-5' }
            ]
                }, {
                    xtype: 'checkboxgroup',
                    fieldLabel: 'Multi-Column<br />(custom widths)',
                    cls: 'x-check-group-alt',
                    // Specify exact column widths (could also include float values for %)
                    columns: [100, 100],
                    vertical: true,
                    items: [
                { boxLabel: 'Item 1', name: 'cb-custwidth', inputValue: 1 },
                { boxLabel: 'Item 2', name: 'cb-custwidth', inputValue: 2, checked: true },
                { boxLabel: 'Item 3', name: 'cb-custwidth', inputValue: 3 },
                { boxLabel: 'Item 4', name: 'cb-custwidth', inputValue: 4 },
                { boxLabel: 'Item 5', name: 'cb-custwidth', inputValue: 5 }
            ]
                }, {
                    xtype: 'checkboxgroup',
                    fieldLabel: 'Custom Layout<br />(w/ validation)',
                    allowBlank: false,
                    msgTarget: 'side',
                    autoFitErrors: false,
                    anchor: '-18',
                    // You can change the 'layout' to anything you want, and include any nested
                    // container structure, for complete layout control. In this example we only
                    // want one item in the middle column, which would not be possible using the
                    // default 'checkboxgroup' layout's columns config.  We also want to put
                    // headings at the top of each column.
                    layout: 'column',
                    defaultType: 'container',
                    items: [{
                        columnWidth: .25,
                        items: [
                    { xtype: 'component', html: 'Heading 1', cls: 'x-form-check-group-label' },
                    { xtype: 'checkboxfield', boxLabel: 'Item 1', name: 'cb-cust-1' },
                    { xtype: 'checkboxfield', boxLabel: 'Item 2', name: 'cb-cust-2' }
                ]
                    }, {
                        columnWidth: .5,
                        items: [
                    { xtype: 'component', html: 'Heading 2', cls: 'x-form-check-group-label' },
                    { xtype: 'checkboxfield', boxLabel: 'A long item just for fun', name: 'cb-cust-3' }
                ]
                    }, {
                        columnWidth: .25,
                        items: [
                    { xtype: 'component', html: 'Heading 3', cls: 'x-form-check-group-label' },
                    { xtype: 'checkboxfield', boxLabel: 'Item 4', name: 'cb-cust-4' },
                    { xtype: 'checkboxfield', boxLabel: 'Item 5', name: 'cb-cust-5' }
                ]
                    }]
                }]
            };

            var radioGroup = {
                xtype: 'fieldset',
                title: '单选题目',
                layout: 'anchor',
                defaults: {
                    anchor: '100%',
                    labelStyle: 'padding-left:4px;'
                },
                collapsible: true,
                items: [{
                    xtype: 'textfield',
                    name: 'txt-test4',
                    fieldLabel: 'Alignment Test'
                }, {
                    xtype: 'radiogroup',
                    fieldLabel: 'Auto Layout',
                    cls: 'x-check-group-alt',
                    items: [
                { boxLabel: 'Item 1', name: 'rb-auto', inputValue: 1 },
                { boxLabel: 'Item 2', name: 'rb-auto', inputValue: 2, checked: true },
                { boxLabel: 'Item 3', name: 'rb-auto', inputValue: 3 },
                { boxLabel: 'Item 4', name: 'rb-auto', inputValue: 4 },
                { boxLabel: 'Item 5', name: 'rb-auto', inputValue: 5 }
            ]
                }, {
                    xtype: 'radiogroup',
                    fieldLabel: 'Single Column',
                    columns: 1,
                    items: [
                { boxLabel: 'Item 1', name: 'rb-col', inputValue: 1 },
                { boxLabel: 'Item 2', name: 'rb-col', inputValue: 2, checked: true },
                { boxLabel: 'Item 3', name: 'rb-col', inputValue: 3 }
            ]
                }, {
                    xtype: 'radiogroup',
                    fieldLabel: 'Multi-Column (horizontal)',
                    cls: 'x-check-group-alt',
                    columns: 3,
                    items: [
                { boxLabel: 'Item 1', name: 'rb-horiz-1', inputValue: 1 },
                { boxLabel: 'Item 2', name: 'rb-horiz-1', inputValue: 2, checked: true },
                { boxLabel: 'Item 3', name: 'rb-horiz-1', inputValue: 3 },
                { boxLabel: 'Item 1', name: 'rb-horiz-2', inputValue: 1, checked: true },
                { boxLabel: 'Item 2', name: 'rb-horiz-2', inputValue: 2 }
            ]
                }, {
                    xtype: 'radiogroup',
                    fieldLabel: 'Multi-Column (vertical)',
                    columns: 3,
                    vertical: true,
                    items: [
                { boxLabel: 'Item 1', name: 'rb-vert', inputValue: 1 },
                { boxLabel: 'Item 2', name: 'rb-vert', inputValue: 2, checked: true },
                { boxLabel: 'Item 3', name: 'rb-vert', inputValue: 3 },
                { boxLabel: 'Item 4', name: 'rb-vert', inputValue: 4 },
                { boxLabel: 'Item 5', name: 'rb-vert', inputValue: 5 }
            ]
                }, {
                    xtype: 'radiogroup',
                    fieldLabel: 'Multi-Column<br />(custom widths)',
                    cls: 'x-check-group-alt',
                    columns: [100, 100],
                    vertical: true,
                    items: [
                { boxLabel: 'Item 1', name: 'rb-custwidth', inputValue: 1 },
                { boxLabel: 'Item 2', name: 'rb-custwidth', inputValue: 2, checked: true },
                { boxLabel: 'Item 3', name: 'rb-custwidth', inputValue: 3 },
                { boxLabel: 'Item 4', name: 'rb-custwidth', inputValue: 4 },
                { boxLabel: 'Item 5', name: 'rb-custwidth', inputValue: 5 }
            ]
                }, {
                    xtype: 'radiogroup',
                    fieldLabel: 'Custom Layout<br />(w/ validation)',
                    allowBlank: false,
                    msgTarget: 'side',
                    autoFitErrors: false,
                    anchor: '-18',
                    layout: 'column',
                    defaultType: 'container',
                    items: [{
                        columnWidth: .25,
                        items: [
                    { xtype: 'component', html: 'Heading 1', cls: 'x-form-check-group-label' },
                    { xtype: 'radiofield', boxLabel: 'Item 1', name: 'rb-cust', inputValue: 1 },
                    { xtype: 'radiofield', boxLabel: 'Item 2', name: 'rb-cust', inputValue: 2 }
                ]
                    }, {
                        columnWidth: .5,
                        items: [
                    { xtype: 'component', html: 'Heading 2', cls: 'x-form-check-group-label' },
                    { xtype: 'radiofield', boxLabel: 'A long item just for fun', name: 'rb-cust', inputValue: 3 }
                ]
                    }, {
                        columnWidth: .25,
                        items: [
                    { xtype: 'component', html: 'Heading 3', cls: 'x-form-check-group-label' },
                    { xtype: 'radiofield', boxLabel: 'Item 4', name: 'rb-cust', inputValue: 4 },
                    { xtype: 'radiofield', boxLabel: 'Item 5', name: 'rb-cust', inputValue: 5 }
                ]
                    }]
                }]
            };

            var detailPanel = {
                xtype: 'panel',
                height: 601,
                autoScroll: true,

                items: [
            checkGroup,
            radioGroup
        ],

                tbar: [
            {
                xtype: 'buttongroup',
                title: 'Button Group',
                columns: 2,
                defaults: {
                    scale: 'small'
                },
                items: [{
                    xtype: 'splitbutton',
                    text: 'Menu Button',
                    iconCls: 'add16',
                    menu: [{ text: 'Menu Button 1'}]
                }, {
                    xtype: 'splitbutton',
                    text: 'Cut',
                    iconCls: 'add16',
                    menu: [{ text: 'Cut Menu Item'}]
                }]
            }
        ],
                bbar: [

            'Toolbar &amp; Menus',
            ' ',
            '-',
            { text: 'Button' },
            {
                xtype: 'splitbutton',
                text: 'Split Button',
                menu: Ext.createWidget('menu', {
                    items: [
                        { text: 'Item 1' },
                        { text: 'Item 2' }
                    ]
                })
            },
            {
                xtype: 'button',
                enableToggle: true,
                pressed: true,
                text: 'Toggle Button'
            }
        ]
            };

            var viewport = Ext.create('Ext.Viewport', {
                id: 'border-example',
                layout: 'border',
                items: [
                // create instance immediately
            Ext.create('Ext.Component', {
                region: 'north',
                height: 32, // give north and south regions a height
                autoEl: {
                    tag: 'div',
                    html: '<h1>网络投票系统管理平台</h1>'
                }
            }), {
                region: 'west',
                stateId: 'navigation-panel',
                id: 'west-panel', // see Ext.getCmp() below

                split: true,
                width: 200,
                minWidth: 175,
                maxWidth: 400,
                animCollapse: true,
                margins: '0 0 0 5',
                layout: 'border',
                items: [accordionPanel, detailsPanel]
            },
                // in this instance the TabPanel is not wrapped by another panel
                // since no title is needed, this Panel is added directly
                // as a Container
            Ext.create('Ext.tab.Panel', {
                region: 'center', // a center region is ALWAYS required for border layout
                deferredRender: false,
                activeTab: 0,     // first tab initially active
                items: [{
                    title: '活动列表',
                    autoScroll: true,
                    items: [gridPanel]
                }, {
                    title: '活动标题',
                    closable: true,
                    autoScroll: true,
                    items: [detailPanel]
                }]
            })]
            });
            // get a reference to the HTML element with id "hideit" and add a click listener to it
            Ext.get("hideit").on('click', function () {
                // get a reference to the Panel that was created with id = 'west-panel'
                var w = Ext.getCmp('west-panel');
                // expand or collapse that Panel based on its collapsed property state
                w.collapsed ? w.expand() : w.collapse();
            });
        });
    </script>
</asp:Content>
